/**
* @desc:  设备升级
* @author qiankui
* @date 2023-4-15 15:36:58
*/
<template>
    <div class="page-container h-100">
        <div class="wrapperform m-b-16">
            <div class="searchbox">
                <el-form ref="form" :inline="true" :model="form" class="demo-form-inline">
                  <!--姓名-->
                  <el-form-item :label="$t('name')">
                    <!--请输入姓名-->
                    <el-input class="inputEl" v-model="form.personName"
                              :placeholder="$t('Please enter your name')"></el-input>
                  </el-form-item>
                  <!--设备名称-->
                  <el-form-item :label="$t('Device name')" prop="deviceType">
                    <el-select multiple id="" v-model="form.deviceCodes"
                               placeholder="">
                      <el-option :label="item.deviceName" :value="item.deviceCode"
                                 v-for="(item,index) in devOptions"
                                 :key="item.deviceCode"></el-option>
                    </el-select>
                  </el-form-item>
                  <!--下发类型-->
                  <el-form-item :label="$t('Distribution type')" prop="deviceType">
                    <el-select id="" v-model="form.operateType"
                               placeholder="">
                      <el-option :label="$t(item.label)" :value="item.value" v-for="(item,index) in xflx"
                                 :key="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <!--下发状态-->
                  <el-form-item :label="$t('Distribution status')" prop="deviceType">
                    <el-select id="xfType" v-model="form.state"
                               placeholder="">
                      <el-option :label="$t(item.label)" :value="item.value" v-for="(item,index) in xfzt"
                                 :key="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <!--下发日期-->
                  <el-form-item :label="$t('date')" prop="createTime">
                    <el-date-picker
                        style="width: 240px !important;"
                        v-model="form.createTime"
                        type="daterange"
                        align="right"
                        format="yyyy-MM-dd"
                        range-separator="~"
                        :start-placeholder="this.i18n.t('Start Date')"
                        :end-placeholder="this.i18n.t('End Date')"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item class="BlankPlaceholder" label=".">
                    <!--重置-->
                    <el-button size="small" type="handle" @click="resetSearch">
                      {{this.i18n.t('Reset')}}
                    </el-button>
                    <!--查询-->
                    <el-button size="small" type="primary" @click="onSearch">{{this.i18n.t('Query')}}
                    </el-button>
                  </el-form-item>

                </el-form>
            </div>
        </div>

        <div class="table-container table-box globalDiv">
            <BaseGlobalTable :table_config="table_config" @addTableData="addTableData" @delTableData="delTableData"
                             @handelDetail="handelDetail"
                             @handleEdit="handleEdit" ref="globalTable"></BaseGlobalTable>
        </div>
        <detail ref='detail' :editTableRow='editTableRow' :detailFlag.sync='detailFlag' v-if='detailFlag'></detail>
        <!--<addViewEdit ref='addViewEdit' :dialogType="dialogType" :editTableRow='editTableRow'-->
        <!--:addViewEditFlag.sync='addViewEditFlag' v-if='addViewEditFlag'></addViewEdit>-->
    </div>
</template>

<script>
    import {deviceinfoGetlist} from '@/api/sbgl'//引入接口
    import {sendType, sendState} from '@/assets/common/js/utils/deviceConfig.js'
    import {devicemodelgetlist, getList} from "@/api/jxgl";
    import {deleteDocument} from "../../../api/document";
    import { exportSendrecorExcel } from "@/api/kqgl";
    //  客户信息管理详情
    import detail from './detail.vue';
    // 引入新增修改弹框
    // import addViewEdit from './addViewEdit.vue'

    export default {
        name: "sbsj_index",
        components: {
            // addViewEdit,
            detail
        },
        props: {},
        data() {
            return {
                xflx: [],
                xfzt: [],
                regDate: '',
                dialogType: '',
                value2: '',
                pickerOptions: {
                    shortcuts: [{
                        // 最近一周
                        text: this.i18n.t('Last week'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        // 最近一个月
                        text: this.i18n.t('Last month'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        // 最近三个月
                        text: this.i18n.t('Last three months'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                devOptions: [],
                form: {
                    personName: null,
                  deviceCodes: null,
                    operateType: null,
                    state: null,
                    createTime: null
                },
                // 数据分析
                table_config: {
                    table_tbody: [],
                    thead: [
                        // 序号
                        {label: "", prop: "@id", type: "index", width: "100"},
                        // 姓名
                        {
                            label: this.i18n.t('name'), prop: "personName", type: "", width: "", type: "function", callback: (row) => {
                                return row.personName || '-'
                            }
                        },
                        // 编号
                        {label: this.i18n.t('Number (job number)'), prop: "number", type: "", width: ""},
                        // 设备名称
                        {
                            label: this.i18n.t('Device name'), prop: "deviceName", width: "", type: ""
                        },
                        // 下发状态
                        {
                            label: this.i18n.t('Distribution status'), prop: "state", type: "function", width: "", callback: (row) => {
                                return this.i18n.t(sendState[row.state].label)
                            }
                        },
                        // 下发类型
                        {
                            label: this.i18n.t('Distribution type'), prop: "operateType", type: "function", width: "", callback: (row) => {
                                return this.i18n.t(sendType[row.operateType].label)
                            }
                        },
                        // 下发时间
                        {
                            label: this.i18n.t('Distribution time'), prop: "createdTime", width: "", type: "function", callback: (row) => {
                                return row.createdTime || '-'
                            }
                        },
                        {
                            // 操作
                            label: this.i18n.t('operation'),
                            prop: "operation",
                            // 当前列的类型，不填为直接渲染文本，function 为调用回调函数，operation 为操作按钮，image 为显示图片
                            type: "operation",
                            width: 130,
                            // 按钮的风格，为 true 则显示自定义图标，为 false 显示 按钮样式
                            icon: true,
                            // 图标风格按钮列表
                            iconClass: [

                                {
                                    type: "detail",
                                    class: "icon-eye",
                                    title: this.i18n.t('view'),//查看
                                    callback: "handelDetail",
                                    power: "",
                                },
                            ],
                        },
                    ],
                    tableButtonArr: [
                        {
                            iconClass: "icon-upload iconfont-KUI",
                            btnType: 2,
                            text: this.i18n.t('Export'),//导出
                            callback: "addTableData",
                            power: "add",
                            customIcon:true
                        },
                        // {
                        //     iconClass: "icon-trash",
                        //     btnType: 2,
                        //     text: "删除",
                        //     callback: "delTableData",
                        //     power: "export",
                        // },
                    ],
                    // 列表前面是否需要显示 checkbox 框，如要显示 值写成 true
                    checkbox: false,
                    index: true,
                    showPagination: true, // 翻页器
                    // 请求表格数据的 url ，可直接传入
                    url: 'sendrecord/getlist',
                    // 请求表格数据的 方式
                    method: "post",
                    //表格 title 文字
                    tableTitle: false,
                    //是否需要给 th 加 样式boder 如果需要加上addBoderClass 不需要显示空或者不加这个字段配置
                    addBoderClass: "addBoderClass",
                },
                selectRow: [],
                editTableRow: null,
                detailFlag: false,
                addViewEditFlag: false,

            };
        },
        computed: {},
        watch: {},
        mounted() {
            this.setTableHeight()
            // 加载设备列表
            this.deviceinfoGetlist()
            // console.log(deviceTypeList);
            this.xflx = sendType.slice(0,3)
            this.xfzt = sendState
            this.onSearch()
            window.onresize = ()=>{
                this.setTableHeight()
            }
        },
        methods: {
            setTableHeight(){
                this.$set(this.table_config,'height',window.innerHeight-428)
            },
            deviceinfoGetlist() {
                deviceinfoGetlist(this.form).then((res) => {
                    if (res.code == 200) {
                        this.devOptions = res.data.values
                    }
                }).catch().finally(() => {
                })
            },
            resetSearch() {
                this.form.personName = null
                this.form.deviceCodes = null
                this.form.operateType = null
                this.form.state = null
                this.form.createTime = null
                this.$refs.globalTable.loading_data(this.form);
            },
            onSearch() {
                var params = JSON.parse(JSON.stringify(this.form))
                if (params.personName === "") {
                    params.personName = null
                }
                if (params.deviceCodes === "") {
                    params.deviceCodes = null
                }
                if (params.operateType === "") {
                    params.operateType = null
                }
                if (params.state === "") {
                    params.state = null
                }
                if (params.createTime) {
                    var formatStr = "yyyy-MM-dd"
                    params.startTime = new Date(params.createTime[0]).format(formatStr) + ' 00:00:00'
                    params.endTime = new Date(params.createTime[1]).format(formatStr) + ' 23:59:59'
                } else {
                    params.createTime = null
                    params.startTime = null
                    params.endTime = null
                }
                this.$nextTick(() => {
                    this.$refs.globalTable.loading_data(params);
                });
                // this.W.$tips('warning', '未实现');
            },

            // 获取表格数据
            getTableData() {
                this.$nextTick(() => {
                    this.$refs.globalTable.loading_data(this.form);
                });
            },
            getFormData(){
                var params = JSON.parse(JSON.stringify(this.form))
                if (this.form.createTime) {
                     var formatStr = "yyyy-MM-dd"
                    params.startTime = new Date(this.form.createTime[0]).format(formatStr) + ' 00:00:00'
                    params.endTime = new Date(this.form.createTime[1]).format(formatStr) + ' 23:59:59'
                }
                return params
            },
            /**
             * @description  添加表格
             * @param {row}: Object 点击项数据
             **/
            addTableData() {
                // if (!this.isElectron) {
                //     // 请在桌面端操作
                //     this.W.$tips("warning", this.i18n.t("Please operate on the desktop!"));
                //     return
                // }
                var params=this.getFormData()
                // this.leftTreeLoading = true
                this.$nextTick(async () => {
                    console.log(params)
                    exportSendrecorExcel(params).then((res) => {
                        this.G.exportFile(res, this.i18n.t('Distribution Record') + new Date().toLocaleString())
                        if (res.code === 200) {
                        }
                    }).catch().finally(() => {
                    })
                });
            },
            /**
             * @param arr:{data} --当前行数据
             * @return: not
             * 表格查看的回调
             */
            handelDetail(data) {
                console.log(data);
                this.dialogType = 'view';
                this.editTableRow = data;
                this.editTableRow.state=this.i18n.t(sendState[this.editTableRow.state].label)
                this.editTableRow.operateType=this.i18n.t(sendType[this.editTableRow.operateType].label)
                this.detailFlag = true;
            },
            // 表格删除回调
            delTableData(row) {
                console.log(row);
                // 确认删除？
                this.W.$myConfirm('warning', this.i18n.t("Are you sure you want to delete it"))
                    .then(async () => {
                        let res = await deleteDocument({id: row.id});
                        if (res.code == 200) {
                            // 删除成功
                            this.W.$tips("success", this.i18n.t("Successfully deleted"));
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                    });
            },
            //  表格修改回调
            handleEdit(row) {
                this.dialogType = 'edit';
                this.addViewEditFlag = true;
                this.editTableRow = row;
                console.log('row', this.editTableRow);
            },
        },
    };
</script>

<style scoped lang="scss">
.right-height {
  height: calc(100% - 36px);
}

::v-deep .content-width .el-form.wrapperform-box .el-form-item {
  width: calc((100% - 100px) / 3);
}

::v-deep #deviceType {
  width: 320px !important;
}
</style>
